<template>
  <div id="start_evaluation" class="container">
    <div class="content">
      <div class="panel">
        <div class="examinpaper_info">
          <div class="info_title">{{paper.title}}</div>
          <div class="info_left">
            <!-- <div>测评等级：初级</div> -->
            <div>
              <span>姓名：{{clue.realName}}</span>
              <span v-if="!clue.age||clue.age==0">年龄：未知</span>
              <span v-else>年龄：{{clue.age}}岁</span>
              手机号：{{clue.phone}}
            </div>
          </div>
          <div class="info_right" v-if="paper.evSubjects">
            当前进度：
            <label>{{currentTitleData.sort}}/</label>
            <span>{{paper.evSubjects.length}}</span>
          </div>
        </div>
        <audio ref="audio" :src="audioUrl"></audio>
        <div class="test_area">
          <div class="test_title">{{currentTitleData.sort}}、{{currentTitleData.title}}</div>
          <div id="content" class="test_stem" v-html="currentTitleData.content"></div>
          <div v-for="sound in currentTitleData.fileList" class="soundPlay">
            <el-image
              style="width: 0.2rem; height: 0.14rem;margin-right:0.06rem;"
              :src="require('@/assets/img/common/audio.png')"
              fit="cover"
            ></el-image>
            <div class="soundName">{{sound.name}}</div>
            <el-image
              v-if="!sound.isPlay"
              style="width: 0.22rem; height: 0.22rem;cursor: pointer;margin-left:0.1rem;"
              :src="require('@/assets/img/common/play.png')"
              @click="play(sound)"
              fit="cover"
            ></el-image>
            <el-image
              v-if="sound.isPlay"
              style="width: 0.22rem; height: 0.22rem;cursor: pointer;margin-left:0.1rem;"
              :src="require('@/assets/img/common/suspend.png')"
              @click="pause(sound)"
              fit="cover"
            ></el-image>
          </div>
          <div
            class="subject_question"
            v-if="currentQuestions.length>0 && currentQuestionIndex >=0 && currentQuestions[currentQuestionIndex]"
          >
            <div class="question_title">
              <div class="index">
                <div class="num" v-if="currentQuestionIndex<10">{{'0'+(currentQuestionIndex+1)}}</div>
                <div class="num" v-else>{{currentQuestionIndex+1}}</div>
              </div>
              <div>
                <div
                  class="title_name"
                  v-if="currentQuestions[currentQuestionIndex].title !=''"
                >{{currentQuestions[currentQuestionIndex].title}}</div>
                <div
                  v-for="sound in currentQuestions[currentQuestionIndex].fileList"
                  class="soundPlay"
                >
                  <el-image
                    style="width: 0.2rem; height: 0.14rem;margin-right:0.06rem;"
                    :src="require('@/assets/img/common/audio.png')"
                    fit="cover"
                  ></el-image>
                  <div class="soundName">{{sound.name}}</div>
                  <el-image
                    v-if="!sound.isPlay"
                    style="width: 0.22rem; height: 0.22rem;cursor: pointer;margin-left:0.1rem;"
                    :src="require('@/assets/img/common/play.png')"
                    @click="play(sound)"
                    fit="cover"
                  ></el-image>
                  <el-image
                    v-if="sound.isPlay"
                    style="width: 0.22rem; height: 0.22rem;cursor: pointer;margin-left:0.1rem;"
                    :src="require('@/assets/img/common/suspend.png')"
                    @click="pause(sound)"
                    fit="cover"
                  ></el-image>
                </div>
              </div>
            </div>
            <!-- <div class="title_name">{{currentQuestions[currentQuestionIndex].title}}</div>
              <el-image
                v-if="currentQuestions[currentQuestionIndex].sound !=''"
                style="width: 0.28rem; height: 0.22rem;cursor: pointer;margin-bottom:0.04rem;margin-right:0.1rem;"
                :src="require('@/assets/img/common/audio.png')"
                fit="cover"
              ></el-image>
              <el-image
                v-if="currentQuestions[currentQuestionIndex].sound !='' && !currentQuestions[currentQuestionIndex].isPlay"
                style="width: 0.3rem; height: 0.3rem;cursor: pointer;margin-right:0.1rem;"
                :src="require('@/assets/img/common/play.png')"
                @click="play(currentQuestions[currentQuestionIndex])"
                fit="cover"
              ></el-image>
              <el-image
                v-if="currentQuestions[currentQuestionIndex].sound !='' && currentQuestions[currentQuestionIndex].isPlay"
                style="width: 0.3rem; height: 0.3rem;cursor: pointer;"
                :src="require('@/assets/img/common/suspend.png')"
                @click="pause(currentQuestions[currentQuestionIndex])"
                fit="cover"
            ></el-image>-->

            <div class="answers" v-if="currentQuestions[currentQuestionIndex].type == 1">
              <div>
                <div
                  class="answers_title"
                  :class="{answers_title_active:answer.isCheck}"
                  v-for="answer,index in currentQuestions[currentQuestionIndex].answers"
                  :key="answer.answerId"
                  @click="checkItem(answer)"
                >{{charCode[index]}}.&nbsp;{{answer.title}}</div>
              </div>
              <!-- <div v-else>
                <span  v-if="isHasFeed"
                  :class="{answers_title_active:answer.isCheck}"
                  v-for="answer,index in currentQuestions[currentQuestionIndex].answers"
                  :key="answer.answerId"
                  class="answers_title"
                  @click="checkItem(answer)"
                >{{charCode[index]}}&nbsp;&nbsp;{{answer.title}}</span>
              </div>-->
            </div>
            <el-slider
              ref="slider"
              v-else-if="currentQuestions[currentQuestionIndex].type == 3 && isShowTips"
              v-model="currentSelect.score"
              :step="1"
              :min="0"
              :format-tooltip="formatTooltip"
              :max="currentQuestions[currentQuestionIndex].score"
              :marks="marks"
            ></el-slider>
          </div>
        </div>
        <div class="foot_btn">
          <el-button
            type="primary"
            style="width:2.4rem;"
            ref="saveBtn"
            v-if="isShowNextQuestion"
            @click="nextQuestion()"
          >{{currentTitleData.sort == paper.evSubjects.length && currentQuestionIndex+1 == currentQuestions.length?"提交":"下一题"}}</el-button>
          <el-button
            type="primary"
            style="width:2.4rem;"
            v-if="isShowNextSubject"
            @click="startAnswer()"
          >开始答题</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
export default {
  components: {},
  data() {
    return {
      charCode: [],
      currentTitleData: {},
      currentQuestions: [],
      currentQuestionIndex: 0,
      isShowNextQuestion: false, //是否显示下一题
      isShowNextSubject: false, //是否显示下一大题
      isHasFeed: false, //是否换行
      audioUrl: "",
      clue: {},
      currentPlayData: {},
      paper: {},
      record: null,
      reportId: "",
      currentSelect: {
        answerContent: "",
        score: 0
      },
      marks: {},
      isShowTips: true
    };
  },
  methods: {
    play(item) {
      if (vm.currentPlayData && vm.currentPlayData.isPlay) {
        vm.currentPlayData.isPlay = false;
        this.$refs.audio.pause();
      }
      item.isPlay = true;
      if (
        vm.currentPlayData &&
        vm.currentPlayData.questionId == item.questionId
      ) {
        vm.currentPlayData.isPlay = true;
      } else {
        vm.currentPlayData = item;
        this.$refs.audio.src = item.url;
      }
      this.$refs.audio.play(); //开始播放
      this.$refs.audio.addEventListener(
        "ended",
        function() {
          vm.currentPlayData.isPlay = false;
          item.isPlay = false;
        },
        false
      );
    },
    pause(item) {
      item.isPlay = false;
      vm.currentPlayData.isPlay = false;
      this.$refs.audio.pause();
    },
    formatTooltip(val) {
      return "得分：" + val + "分";
    },
    init(data) {
      vm.clue = data.clue;
      vm.paper = data.paper;
      vm.record = data.record;
      vm.reportId = data.reportId;
      let subjectId = "";
      if (vm.record && vm.record != null) {
        subjectId =
          vm.record.reportAnswerRecords[
            vm.record.reportAnswerRecords.length - 1
          ].subjectId;
      } else {
        subjectId = vm.paper.evSubjects[0].subjectId;
      }
      vm.initData(0, subjectId);
    },
    /**选中答案 */
    checkItem(item) {
      console.log(item);
      if (item.isCheck) return;
      vm.currentQuestions[vm.currentQuestionIndex].answers.forEach(item => {
        item.isCheck = false;
      });
      item.isCheck = true;
      vm.currentSelect = {
        answerContent: item.title,
        score: item.score
      };

      vm.$forceUpdate();
    },
    /**开始答题 */
    startAnswer() {
      vm.isShowNextQuestion = true;
      vm.isShowNextSubject = false;

      vm.currentQuestionIndex++;

      vm.checkHasFeed();
    },
    /**下一题 */
    nextQuestion() {
      if (vm.currentQuestions[vm.currentQuestionIndex].type == 1) {
        if (
          vm.currentSelect.answerContent == "" &&
          vm.currentSelect.score == 0
        ) {
          vm.$message({
            message: "还未答题，请选择答案!",
            type: "error"
          });
          return;
        }
      }
      this.$refs.audio.pause();
      let paras = {
        userId: vm.clue.studentUserId,
        paperId: vm.paper.paperId,
        questionId: vm.currentQuestions[vm.currentQuestionIndex].questionId,
        answerContent: vm.currentSelect.answerContent,
        score: vm.currentSelect.score
      };
      api.evaluateReportanswerrecordSave(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.currentQuestionIndex++;
          vm.currentSelect = {
            answerContent: "",
            score: 0
          };
          vm.isShowTips = false;
          vm.$forceUpdate();
          if (vm.currentQuestionIndex == vm.currentQuestions.length) {
            vm.nextSubject();
            vm.isShowNextQuestion = false;
          } else {
            vm.checkHasFeed();
          }
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**下一大题 */
    nextSubject() {
      if (vm.currentTitleData.sort == vm.paper.evSubjects.length) {
        vm.submit();
      } else {
        $("#content").html("");
        console.log($("#content")); 
        if (vm.record && vm.record != null) {
          vm.record = null;
        }
        vm.initData(1, vm.currentTitleData.subjectId);
      }
    },
    /**提交 */
    submit() {
      let paras = {
        reportId: vm.reportId
      };
      api
        .evaluateReportCommit(paras)
        .then(function(data) {
          if (data.resultCode == 2000) {
            vm.$message({
              message: "提交成功",
              type: "success"
            });
            return api.examinDataReportList({
              reportId: vm.reportId
            });
          } else {
            vm.$message.error(data.message);
          }
        })
        .then(function(data) {
          if (data.resultCode == 2000) {
            vm.$emit("ok", { report: data.list[0] });
          } else {
            vm.$message.error(data.message);
          }
        });
    },
    /**校验选项是否换行 */
    checkHasFeed() {
      // vm.isHasFeed = false;
      // vm.currentQuestions[vm.currentQuestionIndex].answers.forEach(item => {
      //   item.isCheck = false;
      //   if (item.title.length > 2) {
      //     vm.isHasFeed = true;
      //   }
      // });
      if (
        vm.currentQuestions[vm.currentQuestionIndex] &&
        vm.currentQuestions[vm.currentQuestionIndex].type == 3
      ) {
        let score = vm.currentQuestions[vm.currentQuestionIndex].score;
        vm.marks = {
          0: "0分",
          [score]: score + "分"
        };
        vm.$nextTick(function() {
          vm.isShowTips = true;
        });
        vm.$forceUpdate();
      }
    },
    initData(queryType, subjectId) {
      api
        .examinpaperSubjectInfo({
          subjectId: subjectId,
          paperId: vm.paper.paperId,
          queryType: queryType
        })
        .then(function(data) {
          if (data.resultCode == 2000) {
            data.list.fileList = [];
            if (data.list.sound && data.list.sound != "") {
              let soundArr = data.list.sound.split(",");
              for (let i = 0; i < soundArr.length; i++) {
                // let
                data.list.fileList.push({
                  name: soundArr[i].substring(soundArr[i].lastIndexOf("/") + 1),
                  url: soundArr[i],
                  questionId: tool.uuid(),
                  isPlay: false
                });
              }
            }
            data.list.questions.forEach(question => {
              question.fileList = [];
              if (question.sound && question.sound != "") {
                let soundArr = question.sound.split(",");
                for (let i = 0; i < soundArr.length; i++) {
                  // let
                  question.fileList.push({
                    name: soundArr[i].substring(
                      soundArr[i].lastIndexOf("/") + 1
                    ),
                    url: soundArr[i],
                    questionId: tool.uuid(),
                    isPlay: false
                  });
                }
              }
            });
            vm.currentTitleData = data.list;
            vm.currentQuestions = data.list.questions;
            if (vm.record && vm.record != null) {
              data.list.questions.forEach((item, index) => {
                if (
                  item.questionId ==
                  vm.record.reportAnswerRecords[
                    vm.record.reportAnswerRecords.length - 1
                  ].questionId
                ) {
                  if (index == data.list.questions.length - 1) {
                    vm.record == null;
                    vm.nextSubject();
                  } else {
                    vm.isShowNextQuestion = true;
                    vm.currentQuestionIndex = index + 1;
                    vm.checkHasFeed();
                  }
                }
              });
            } else {
              vm.currentQuestionIndex = -1;
              vm.isShowNextSubject = true;
            }
          } else {
            vm.$message.error(data.message);
          }
        });
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.charCode = config.charCode;
  }
};
</script>

<style lang="scss">
#start_evaluation {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .btn_editor {
    font-size: 0.16rem;
  }
  .examinpaper_info {
    padding-top: 0.3rem;
    padding-bottom: 0.1rem;
    width: 100%;
    overflow: hidden;
    font-size: 0.16rem;
    color: #666666;
    position: relative;
    .info_title {
      text-align: center;
      font-size: 0.22rem;
      font-weight: 600;
      color: #333333;
    }
    .info_left {
      color: #333333;
      text-align: center;
      margin-top: 0.1rem;
      span {
        margin-right: 0.4rem;
      }
    }
    .info_right {
      position: absolute;
      right: 0rem;
      top: 0.6rem;
      text-align: right;
      font-size: 16px;
      width: 20%;
      label {
        font-size: 24px;
        color: #999999;
      }
      span {
        font-size: 24px;
        color: #ff4200;
      }
    }
  }
  .test_area {
    border: solid 1px #ebebeb;
    font-size: 0.16rem;
    color: #666666;
    border-radius: 0.04rem;
    .test_title {
      height: 0.5rem;
      color: #666666;
      background-color: #f9fafb;
      border-bottom: solid 1px #ebebeb;
      padding-top: 0.1rem;
      padding-left: 0.25rem;
      font-weight: 600;
    }
    .test_stem {
      margin: 0 auto;
      width: 1093px;
      max-height: 394px;
      overflow: auto;
      color: #000000;
    font-size: 18px;
    }
    /*滚动条样式*/
    .test_stem::-webkit-scrollbar {
      width: 0.04rem;
    }
    .test_stem::-webkit-scrollbar-thumb {
      border-radius: 0.5rem;
      background: #bbbbbb;
    }
    .test_stemtest_stem::-webkit-scrollbar-track {
      background: #f2f6fc;
    }
    .soundPlay {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0e1115;
      font-size: 0.18rem;
      .soundName {
        height: 0.38rem;
        line-height: 0.38rem;
      }
    }
    .subject_question {
      margin-top: 0.06rem;
      .question_title {
        position: relative;
        background-color: #ddeaf8;
        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
        font-size: 0.18rem;
        color: #0e1115;
        .index {
          position: absolute;
          top: 0;
          bottom: 0;
          background-color: #6d98d9;
          width: 0.68rem;
          .num {
            position: absolute;
            width: 0.68rem;
            height: 0.38rem;
            top: calc(50% - 0.19rem);
            left: 0;
            text-align: center;
            color: #fefeff;
            padding-top: 0.06rem;
            font-weight: 600;
          }
        }
        .title_name {
          margin-left: 0.88rem;
          height: 0.38rem;
          line-height: 0.38rem;
        }
        .soundPlay {
          margin-left: 0.88rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .soundName {
            height: 0.38rem;
            line-height: 0.38rem;
          }
        }
      }
      .answers {
        width: 100%;
        padding-top: 0.1rem;
        padding-left: 0.88rem;
        color: #0e1115;
        background-color: #f9fafb;
        font-size: 18px;
        .answers_title {
          padding: 0.04rem 0rem;
          cursor: pointer;
        }
        .answers_title_active {
          color: #3885f8;
          // background-color: #3885f8;
        }
      }
    }
  }
  .foot_btn {
    margin-top: 0.2rem;
    width: 100%;
    text-align: center;
  }
  .el-slider__marks-text {
    width: 0.5rem;
    text-align: center;
  }
}
</style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>